Impressum

Webfonts

Webfont Technologie und Online-Schriftarten für individuelles Design

Webfonts

Bewertung

Hilfreiche Einschätzung der Schwierigkeit

Nutzen ★★☆☆☆

Wie relevant und hilfreich ist es?

Aufwand ★★☆☆☆

Wie schwer ist es anzuwenden?

Was sind Webfonts?

Auf die steigende Nachfrage nach individueller Gestaltung entstand Bedarf nach einer größeren Auswahl an Schriftarten, die über die Standardoptionen der websicheren Schriftarten hinausgingen. Webfonts wurden entwickelt, um diese Lücke zu schließen. Sie dienen als spezielle Schriftarten, die direkt über das Internet geladen und auf Webseiten angezeigt werden können. Anders als herkömmliche Schriftarten müssen Webfonts nicht auf dem Computer des Benutzers installiert sein. Stattdessen werden sie beim Laden einer Webseite automatisch heruntergeladen und im Browser des Besuchers dargestellt.

Webfont Formate

Webfonts gibt es in verschiedenen Formaten, welche eigene Eigenschaften mit sich bringen. Hier sind ein paar relevante Beispiele:
TrueType (TTF) ist ein entwickeltes Schriftformat, das in den späten 1980er Jahren eingeführt wurde. TTF ist eines der am weitesten verbreiteten Formate und kann sowohl auf Windows- als auch auf Mac-Systemen verwendet werden. Es bietet eine hohe Qualität und Skalierbarkeit, was es zu einer beliebten Wahl für Webfonts macht.

OpenType (OTF) ist eine Erweiterung des TrueType-Formats. Es unterstützt erweiterte Typographie-Funktionen wie Ligaturen, alternative Glyphen und Verschiedene Sprachunterstützung.

Web Open Font Format (WOFF) wurde speziell für die Verwendung im Web entwickelt und bietet eine bessere Komprimierung als TTF und OTF. Es unterstützt Metadaten und Lizenzinformationen und ist das am weitesten verbreitete Format für Webfonts. WOFF wird von allen modernen Browsern unterstützt.

Web Open Font Format 2 (WOFF2) ist eine Weiterentwicklung des WOFF-Formats und bietet eine noch effizientere Komprimierung, was zu schnelleren Ladezeiten führt. Es wird ebenfalls von allen modernen Browsern unterstützt und ist der aktuelle Standard für Webfonts.

Bezahlte Webfont Server

Bezahlte Webfont-Server bieten eine umfassende Auswahl an Schriftarten, die über das Internet auf Webseiten eingebunden werden können. Dabei erheben die Anbieter Gebühren, die entweder auf der Nutzungshäufigkeit, der Anzahl der Seitenaufrufe oder einem Abonnement basieren. Diese Dienste stellen sicher, dass die Schriftarten korrekt lizensiert sind. Oft werden noch weitere Funktionen wie umfangreiche Sammlungen, typografische Werkzeuge und technische Unterstützung angeboten.

Ein Beispiel für bezahlte Webfont-Server ist Adobe Fonts. Dieser bietet Zugang zu einer großen Auswahl an Schriftarten, die in der Creative-Cloud Abonnements enthalten sind. Ein weiteres Beispiel ist die Plattform MyFonts. Hier wird ein flexibles Lizenzierungsmodell mit einer breiten Palette an Schriftarten angeboten.

Bezahlte Webfont-Server bieten oft eine große Auswahl und hohe Qualität von Webfonts. Dabei ist auch die Nutzung der Schriftarten sichergestellt, da alle Lizenzbedingungen erfüllt sind. Der offensichtlichste Nachteil sind jedoch die Kosten. Außerdem besteht eine Abhängigkeit von einem Drittanbieter. Das bedeutet oft eine Abhängigkeit von dessen Servern und deren Verfügbarkeit.

Kostenlose Webfont Server

Kostenlose Webfont-Server bieten eine Auswahl an Schriftarten, die ohne Lizenzgebühren auf Webseiten eingebunden werden können. Ein Beispiel ist Google Fonts, welches einer der bekanntesten und am weitesten verbreiteten Quellen für kostenlose Webfonts ist. Font Squirrel ist ein weiterer Anbieter mit einer Sammlung von Schriftarten, die für kommerzielle Projekte genutzt werden können.

Der größte Vorteil ist die Kostenfreiheit. Außerdem ist die Implementierung vieler kostenloser Webfont-Dienste oft einfach gehalten. Jedoch gibt es oft Qualitätsunterschiede bei den Schriftarten, wodurch die Qualität und Lesbarkeit eingeschränkt sein kann.

Außerdem ist es wichtig zu erwähnen, dass zum Beispiel im Fall von Google Fonts dieser Dienst bei jedem Besuch der Webseite Daten sammelt. Es werden zum Beispiel der verwendete Browser, die besuchte Webseite und die IP-Adresse des Nutzers als Daten an Google Fonts übertragen. Dies ist ein wichtiger Aspekt für Nutzer und ihre Daten. Um dies zu umgehen, kann man die Webfonts auch selbst hosten.

Self Hosting

Beim Self-Hosting von Webfonts werden die Schriftdateien direkt auf dem eigenen Webserver gespeichert und von dort aus an die Benutzer ausgeliefert. Anstatt die Schriftarten von einem externen Dienst wie Google Fonts oder Adobe Fonts zu laden, wird die gesamte Verwaltung der Schriftarten lokal auf der eigenen Infrastruktur organisiert.

Um auf der eigenen Webseite Webfonts zu hosten, wird zuerst die Datei der gewollten Schriftart heruntergeladen. Dabei ist es wichtig, darauf zu achten, dass es die notwendigen Formate sind, um eine breite Browserkompatibilität zu gewährleisten. Die Dateien werden dann in geeigneten Ordner des Webservers gespeichert und durch korrekte Verweise geladen.

Durch Self-Hosting gibt es keine Abhängigkeiten von externen Servern, wodurch eine dauerhafte Verfügbarkeit der Webfonts ermöglicht wird. Ein Nachteil wäre die technische Komplexität bei der Einrichtung, Wartung und Konvertierung von Schriftdateien sowie deren Einbindung in die Webseite.


@font-face {
    font-family: 'MyCustomFont';
    src: url('/fonts/MyCustomFont.woff2') format('woff2'),
            url('/fonts/MyCustomFont.woff') format('woff'),
            url('/fonts/MyCustomFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
                        

Webfonts auf dieser Webseite?

Auf dieser Webseite kommen zwei verschiedene Techniken zum Einsatz, um Webfonts zu integrieren. Die primäre Schriftart, Inter Sans Serif, wurde mithilfe der Google Fonts API eingebunden. Dieser Ansatz bietet den Vorteil, dass die Schriftart durch eine einfache CSS-Deklaration eingebunden wird und direkt verwendet werden kann, ohne zusätzliche Anpassungen vornehmen zu müssen.

Für die zweite Methode wurden die benötigten Schriftdateien wurden lokal heruntergeladen und in einem speziellen Verzeichnis organisiert. Diese Schriftarten wurden dann über CSS über direkte Verweise auf auf die entsprechenden Dateien eingebunden. Anschließend konnten sie im Code genauso wie die primäre Schriftart genutzt werden.


/* Mit dem Import Befehl aus Google Fonts */
/* Hier wird als Primary Font Inter importiert */




@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
                        

/* Custom Fonts */
/* hier mit Verweis auf die Datei im lokalen Ordner */

@font-face {
    font-display: swap;
    font-family: LoveLive;
    font-style: regular;
    font-weight: 400;
    src: url("../fonts/love_live/LoveLive-nAxlP.ttf");
}
                        

Best Practices

Formate

Biete mehrere Formate (WOFF, WOFF2, TTF, OTF) an, um eine breite Browserunterstützung zu gewährleisten.

Schriftauswahl

Wählen Sie Schriftarten, die gut zusammenpassen und den Ton der Website widerspiegeln. Es ist oft am besten, nicht mehr als zwei oder drei verschiedene Schriftarten auf einer Website zu verwenden.

Datenschutz

Wenn Webfonts von externen Diensten geladen werden, stelle sicher, dass dies den Datenschutzgesetzen entspricht, insbesondere der DSGVO. Verwende möglichst Self-Hosting, um Datenschutzrisiken zu minimieren.

Sprache

Stelle sicher, dass die gewählten Schriftarten alle benötigten zeichen und Sonderzeichen für die verwendeten Sprachen unterstützen.